<template>
  <div>
    <SearchForm
        @search="onSearch"
        @reset="onReset"
        :search-list="searchList" :search-params="searchParams">
    </SearchForm>

    <div class="table-layout">
      <el-card shadow="never">
        <div class="table-box">
          <el-table
              size="large"
              stripe
              border
              v-loading="loading"
              max-height="500px"
              :data="tableData"
              row-key="id"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.8)"
              @selection-change="onSelect"
          >
            
            <el-table-column prop="order_no" label="订单号" width="180"/>
            <el-table-column label="用户信息" width="200">
              <template slot-scope="scope">
                <div v-if="scope.row.user">
                  <div>{{ scope.row.user.nickname || '未知用户' }}</div>
                  <div style="color: #999; font-size: 12px;">{{ scope.row.user.phone || '无手机号' }}</div>
                </div>
                <span v-else>用户信息缺失</span>
              </template>
            </el-table-column>
            <el-table-column prop="payment_amount" label="充值金额" width="120">
              <template slot-scope="scope">
                <span style="color: #67C23A; font-weight: bold;">¥{{ scope.row.payment_amount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="120">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === 'pending'" type="warning">待支付</el-tag>
                <el-tag v-else-if="scope.row.status === 'paid'" type="success">已支付</el-tag>
                <el-tag v-else-if="scope.row.status === 'refunding'" type="info">退款中</el-tag>
                <el-tag v-else-if="scope.row.status === 'refunded'" type="danger">已退款</el-tag>
                <el-tag v-else-if="scope.row.status === 'cancelled'" type="info">已取消</el-tag>
                <el-tag v-else type="info">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="payment_time" label="支付时间" width="160">
              <template slot-scope="scope">
                <span v-if="scope.row.payment_time">{{ scope.row.payment_time }}</span>
                <span v-else style="color: #999;">-</span>
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" width="160"/>
            <el-table-column label="操作" fixed="right" width="120">
              <template slot-scope="scope">
                <el-button 
                  v-if="scope.row.status === 'paid'" 
                  type="text" 
                  style="color: #E6A23C" 
                  @click="onRefund(scope.row)"
                >
                  退款
                </el-button>
                <!-- <el-button 
                  v-if="scope.row.status === 'refunding'" 
                  type="text" 
                  style="color: #409EFF" 
                  @click="onRefundConfirm(scope.row)"
                >
                  确认退款
                </el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <div class="page-box">
        <el-pagination
            background
            :current-page="pageNo"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="changePageSize"
            @current-change="changePageNo"
        />
      </div>
    </div>

    <!-- 退款确认对话框 -->
    <el-dialog
      title="退款确认"
      :visible.sync="refundDialogVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="refundForm" :rules="refundRules" ref="refundFormRef" label-width="100px">
        <el-form-item label="订单号">
          <span>{{ currentRefundOrder.order_no }}</span>
        </el-form-item>
        <el-form-item label="充值金额">
          <span style="color: #67C23A; font-weight: bold;">¥{{ currentRefundOrder.payment_amount }}</span>
        </el-form-item>
        <el-form-item label="用户信息">
          <span>{{ currentRefundOrder.user ? currentRefundOrder.user.nickname : '未知用户' }}</span>
        </el-form-item>
        <el-form-item label="退款原因" prop="refund_reason">
          <el-input
            v-model="refundForm.refund_reason"
            type="textarea"
            :rows="3"
            placeholder="请输入退款原因"
            maxlength="255"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="refundDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmRefund" :loading="refundLoading">确认退款</el-button>
      </div>
    </el-dialog>

    <!-- 退款处理对话框 -->
    <el-dialog
      title="退款处理"
      :visible.sync="refundConfirmDialogVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="refundConfirmForm" :rules="refundConfirmRules" ref="refundConfirmFormRef" label-width="100px">
        <el-form-item label="订单号">
          <span>{{ currentRefundOrder.order_no }}</span>
        </el-form-item>
        <el-form-item label="充值金额">
          <span style="color: #67C23A; font-weight: bold;">¥{{ currentRefundOrder.payment_amount }}</span>
        </el-form-item>
        <el-form-item label="用户信息">
          <span>{{ currentRefundOrder.user ? currentRefundOrder.user.nickname : '未知用户' }}</span>
        </el-form-item>
        <el-form-item label="退款备注" prop="refund_remark">
          <el-input
            v-model="refundConfirmForm.refund_remark"
            type="textarea"
            :rows="3"
            placeholder="请输入退款备注"
            maxlength="255"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="refundConfirmDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmRefundProcess" :loading="refundConfirmLoading">确认处理</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crud from "@/mixins/crud";
import { http } from "@/api";

export default {
  name: "RechargeIndex",
  mixins: [crud],
  data() {
    return {
      request: http.recharge,
      searchList: [
        {
          name: 'input',
          label: '充值订单号',
          prop: 'order_no',
          placeholder: '请输入订单号'
        },
        // {
        //   type: 'input',
        //   label: '用户昵称',
        //   prop: 'user_nickname',
        //   placeholder: '请输入用户昵称'
        // },
        // {
        //   type: 'input',
        //   label: '用户手机',
        //   prop: 'user_phone',
        //   placeholder: '请输入用户手机号'
        // },
        {
          name: 'select',
          label: '状态',
          prop: 'status',
          placeholder: '请选择状态',
          options: [
            { label: '待支付', value: 'pending' },
            { label: '已支付', value: 'paid' },
            { label: '退款中', value: 'refunding' },
            { label: '已退款', value: 'refunded' },
            { label: '已取消', value: 'cancelled' }
          ]
        }
      ],
      searchParams: {},
      defaultParams: {},
      tableData: [],
      // 退款相关
      refundDialogVisible: false,
      refundConfirmDialogVisible: false,
      currentRefundOrder: {},
      refundForm: {
        refund_reason: ''
      },
      refundConfirmForm: {
        refund_remark: ''
      },
      refundRules: {
        refund_reason: [
          { required: true, message: '请输入退款原因', trigger: 'blur' }
        ]
      },
      refundConfirmRules: {
        refund_remark: [
          { required: true, message: '请输入退款备注', trigger: 'blur' }
        ]
      },
      refundLoading: false,
      refundConfirmLoading: false
    }
  },
  methods: {
    // 申请退款
    onRefund(row) {
      this.currentRefundOrder = row;
      this.refundForm.refund_reason = '';
      this.refundDialogVisible = true;
    },

    // 确认退款申请
    confirmRefund() {
      this.$refs.refundFormRef.validate(async (valid) => {
        if (valid) {
          this.refundLoading = true;
          try {
            await http.recharge.refund({
              id: this.currentRefundOrder.id,
              refund_reason: this.refundForm.refund_reason
            });
            await http.recharge.refundConfirm({
              id: this.currentRefundOrder.id,
              refund_remark: this.refundForm.refund_reason
            });
            this.$message.success('退款申请提交成功');
            this.refundDialogVisible = false;
            this.initData();
          } catch (error) {
            // this.$message.error(error.message || '退款申请失败');
          } finally {
            this.refundLoading = false;
          }
        }
      });
    },

    // 退款处理确认
    onRefundConfirm(row) {
      this.currentRefundOrder = row;
      this.refundConfirmForm.refund_remark = '';
      this.refundConfirmDialogVisible = true;
    },

    // 确认退款处理
    confirmRefundProcess() {
      this.$refs.refundConfirmFormRef.validate(async (valid) => {
        if (valid) {
          this.refundConfirmLoading = true;
          try {
            await http.recharge.refundConfirm({
              id: this.currentRefundOrder.id,
              refund_remark: this.refundConfirmForm.refund_remark
            });
            this.$message.success('退款处理成功');
            this.refundConfirmDialogVisible = false;
            this.initData();
          } catch (error) {
            this.$message.error(error.message || '退款处理失败');
          } finally {
            this.refundConfirmLoading = false;
          }
        }
      });
    },

    // 查看详情
    onViewDetail(row) {
      // 这里可以跳转到详情页面或显示详情弹窗
      this.$message.info('查看详情功能待实现');
    }
  }
}
</script>

<style scoped lang="scss">
.table-layout {
  margin-top: 20px;
}
.table-box {
  margin-bottom: 20px;
}
.page-box {
  margin-top: 20px;
  text-align: right;
}
.dialog-footer {
  text-align: right;
}
</style>
